<template>
    <div class="equipment_QT commTable">
        <!-- 头部 -->
        <Header></Header>
        <!-- 头部nav -->
        <header-nav></header-nav>
        <div class="content">
            <!-- 左侧tab页面 -->
            <left-tapside></left-tapside>
            <!-- 右侧表格内容 -->
            <keep-alive>
                <component :is="currentView"></component>
            </keep-alive>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import Header from '@/components/Header'
import HeaderNav from '@/components/HeaderNav'
import leftTapside from '@/components/leftTapSide/index'
import equmentdxgn from './components/equment_dxgn'
import equmentgn from './components/equment_gn'
import equmentqt from './components/equment_qt'
import equmentxtxn from './components/equment_xtxn'
import equmentzk from './components/equment_zk'

export default {
     computed:{
         ...mapState({
             isTapModule:state =>state.TaskModule.isTapModule,
             TapModuleName:state =>state.TaskModule.TapModuleName,
         }),
         currentView(){
            return this.arr[this.isTapModule];
        }
     },
    data(){
        return{
            arr:['equmentqt','equmentzk','equmentgn','equmentdxgn','equmentxtxn'],
             tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }
            ],
        }
    },

    components:{
        leftTapside,Header,HeaderNav,equmentqt,equmentzk,equmentxtxn,equmentdxgn,equmentgn,
    },
}
</script>
<style lang="less" scoped>
.content{
    display: flex;
    
}
.table_cont{
    width: calc(100vw - 1.3rem);
    position: relative;
    padding-left: .5rem;
    float: right;
    height:calc(100vh - 1.3rem);
    background: linear-gradient(0deg, #E7E9F2 0%, #E7E9F2 100%);
    .crumbs{
        &>span{
            cursor: pointer;
        }
        margin-top: .18rem;
        font-size: .24rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        text-decoration: underline;
        color: #111434;
        margin-bottom: .14rem;
    }
    .tabOpt{
        display: flex;
        
        .taskcom_button{
            margin-right: .1rem;

            height: .4rem;
            border: 1px solid #C1C8D7;
            background: linear-gradient(0deg, #D4DBE8 0%, #F8F9FB 100%);
            border-radius: .03rem;
            outline: none;
            font-size: .16rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #505971;
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0 .1rem;
            cursor: pointer;
            &:hover{
                color: #FFFFFF;
                background: linear-gradient(0deg, #185DE8 0%, #4885FF 100%);
                .danger{
                    background: url("../../assets/images/taskOptIcon/warn.png") no-repeat center 0px;
                    background-position: center 0px;
                    background-size: cover;
                    background-repeat: no-repeat;
                }
            }
            .btn_icon{
                width: .23rem;
                height: .2rem;
            }
            .danger{
                background: url("../../assets/images/taskOptIcon/warn.png") no-repeat center 0px;
                background-position: center 0px;
                background-size: cover;
                background-repeat: no-repeat;
            }
        }
    }
    
}
.table{
    padding: .3rem .36rem;
    background: #F2F3F7;
    margin-top: .14rem;
    height: calc(100vh - 3rem);;
    overflow-y: scroll;
}
</style>
<style lang="less">
.commTable{
    .el-table thead tr,.el-table thead th{
        background-color: #D8DCEA !important;
        padding: .14rem 0;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #505971;
    }
    
}

</style>